<template>
  <div class="dashboard-container" style="width: 100%;padding:0;margin:0;">
    <!-- 顶部标题栏 -->
    <el-row class="header-row">
      <el-col :span="24" class="header-content">
        <h1>项目管理</h1>
        <div class="header-info">
          <el-date-picker placeholder="选择项目日期" v-model="项目_date" value-format="yyyy-MM-dd"></el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="chart-row" style="margin-top: 1rem">

      <el-col :span="24" class="chart-card">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-list"></i> 项目清单</span>
            <!--回车添加项目-->
            <el-row :gutter="15">
              <el-col :span="24">
                <el-input placeholder="此处输入新项目" v-model="add_project_form.project_name"
                  @keyup.enter.native="add_project"></el-input>

              </el-col>
            </el-row>

          </div>
          <!-- 表格 -->
          <div>
            <el-table height="800" border :data="project_list" style="width: 100%" class="ml-5">
              <el-table-column prop="program_name" label="项目名称" align="center">
              </el-table-column>
              <el-table-column prop="goal_name" label="目标归属" align="center">
              </el-table-column>
              <el-table-column prop="program_desc" label="项目描述" align="center">
              </el-table-column>
              <el-table-column prop="program_status" label="项目完成情况" align="center">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" align="center">
              </el-table-column>
              <el-table-column prop="attachment" label="附件" align="center">
              </el-table-column>
              <el-table-column prop="execute" label="操作" align="center">
                <template #default="scope">
                  <!-- 查看按钮，使用查看图标 -->
                  <el-button size="small" type="info" icon="el-icon-edit" @click="handleView(scope.row)"
                    style="margin-right: 1rem">
                  </el-button>
                  <!-- 查看按钮，使用查看图标 -->
                  <el-button size="small" type="danger" icon="el-icon-delete" @click="delete_project(scope.row.id)"
                    style="margin-right: 1rem">
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <div class="pagination-container">
              <el-pagination @size-change="size_change" @current-change="current_change" :current-page="CurrentPage"
                :page-sizes="[5, 20, 30, 40]" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="TotalCount"></el-pagination>
            </div>

          </div>

        </el-card>

      </el-col>
    </el-row>

    <!--侧边抽屉栏-->
    <!-- 项目详情抽屉 -->
    <el-drawer :visible.sync="drawerVisible" title="项目详情" direction="rtl" size="40%" :wrapper-closable="true">
      <el-row :gutter="15">
        <el-col :span="24">

        </el-col>
      </el-row>
      <div class="drawer-container">
        <!-- 基础信息卡片 -->
        <el-card shadow="hover" class="info-card mb-4">
          <div class="card-header">
            <i class="el-icon-location-information"></i>
            <span class="card-title">基础信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <span class="label">项目编号：</span>
              <span class="value">{{ currentProject.id || '-' }}</span>
            </div>
            <div class="info-row">
              <span class="label">年度目标归属：</span>
              <el-select v-model="currentProject.goal_id" filterable>
                <el-option v-for="item in all_goal" :key="item.id" :label="item.goal_name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-card>

        <!-- 状态信息卡片 -->
        <el-card shadow="hover" class="status-card mb-4">
          <div class="card-header">
            <i class="el-icon-loading"></i>
            <span class="card-title">状态信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <span class="label">项目状态：</span>
              <span class="value">
                <el-select v-model="currentProject.program_status">
                  <el-option v-for="item in goal_status_list" :key="item.id" :label="item.goal_status"
                    :value="item.id"></el-option>
                </el-select>
              </span>
            </div>
          </div>
        </el-card>

        <!-- 日志信息卡片 -->
        <el-card shadow="hover" class="status-card mb-4">
          <div class="card-header">
            <i class="el-icon-files"></i>
            <span class="card-title">日志信息</span>
          </div>
          <!-- 核心修改：给 card-content 添加固定高度和滚动属性 -->
          <div class="card-content timeline-container">
            <div class="block">

              <el-timeline>
                <el-timeline-item v-for="item in currentProject.log_info" :key="item.id" :timestamp="item.submit_time"
                  placement="top">
                  <el-button size="small" type="danger" @click.native="delByLogId(item.id, currentProject.id)"
                    class="el-icon-delete">
                  </el-button>
                  <el-button size="small" type="warning" @click.native="open_edit_log_modal(item)"
                    class="el-icon-edit"></el-button>
                  <el-card class="timeline-card">
                    <h4>{{ item.log_title }}</h4>
                    <p>{{ item.description }}</p>
                    <p>专注时长：{{ item.focus_time }}分钟 | 自我评分: {{ item.self_score }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-card>


        <!-- 详情描述卡片 -->
        <el-card shadow="hover" class="desc-card">
          <div class="card-header">
            <i class="el-icon-edit"></i>
            <span class="card-title">详细描述</span>
          </div>
          <div class="card-content desc-content">
            <div class="desc-item">
              <span class="label">项目名称：</span>
              <el-input type="textarea" placeholder="请输入此项目的相关描述" v-model="currentProject.program_name"
                :rows="4"></el-input>
            </div>
            <div class="desc-item mt-4">
              <span class="label">日志/感想/总结：</span>
              <el-input type="textarea" placeholder="请输入此项目的日志/感想/总结" v-model="currentProject.program_desc"
                :rows="4"></el-input>
            </div>
            <div class="desc-item mt-4">
              <span class="label">附件：</span>
              <div class="attachment-list">
                <el-link v-if="currentProject.attachment" type="primary" icon="el-icon-download"
                  @click="handleDownloadAttachment(currentProject.attachment)">
                  下载附件
                </el-link>
                <span v-else>无附件</span>
              </div>
              <div style="display:flex;justify-content: right; margin-top: 3rem">
                <el-button type="success" @click.native="submit_project_change">
                  提交更改
                </el-button>
              </div>
            </div>
          </div>
        </el-card>

      </div>

    </el-drawer>
  </div>
</template>

<script>
// import axios from 'axios'

import moment from 'moment';

export default {
  components: {  },

  computed: {},

  name: 'ProgramView',

  data() {

    return {
      // 执行某个动作时，清除附件上传的预览列表。
      clear_file_list: false,
      currentOperate: 'add', // 当前操作类型（add/update）
      currentLogId: '',      // 当前要更改的日志ID
      new_项目: '',
      goal_status_list: [
        {
          id: 0,
          goal_status: '待完成',
        },
        {
          id: 1,
          goal_status: '已完成',
        },
        {
          id: 2,
          goal_status: '已放弃',
        },
      ],
      //选中的项目日期
      项目_date: moment(new Date()).format('YYYY-MM-DD'),
      // 抽屉相关状态
      drawerVisible: false,
      currentProject: {
        log_info: [],
      }, // 存储当前查看的项目数据

      // 重要程度映射（与表格一致）
      importanceType: [
        { type: 'danger', label: '重要且紧急', id: 0 },
        { type: 'primary', label: '重要不紧急', id: 1 },
        { type: 'warning', label: '紧急不重要', id: 2 },
        { type: 'success', label: '不紧急不重要', id: 3 }
      ],

      // 项目状态映射（与表格一致）
      taskStatusType: [
        { type: 'info', label: '待完成', id: 0 },
        { type: 'success', label: '进行中', id: 1 },
        { type: 'warning', label: '已完成', id: 2 },
        { type: 'danger', label: '未知状态[出错]', id: 3 }
      ],

      // 项目相关的变量
      project_var: {
        all_projects: [
          {
            id: null,
            user_id: null,
            program_name: null,
            goal_id: null,
            program_desc: null,
            program_status: null,
            create_time: null,
            update_time: null
          }
        ],
      },


      // 表格当前页显示的数据
      project_list: [],
      // 当前页码
      CurrentPage: 1,
      // 每页显示条数
      PageSize: 30,
      // 总数据条数
      TotalCount: 0,

      // 当日项目
      all_projects: [],
      // 支出时间选择
      exp_date: moment(new Date()).format('YYYY-MM-DD'),
      // 新增支出弹窗表单组件配置项
      goal_add_dialog_visible: false,

      // 新增目标表单
      add_project_form: {
            id: null,
            user_id: null,
            program_name: null,
            goal_id: null,
            program_desc: null,
            program_status: null,
            create_time: null,
            update_time: null,
        // 日志信息。
        log_info: {}
      },
      formLabelWidth: '120px',

      // 所有目标信息
      all_goal: [],
      // 日志相关的变量
      logModalVisible: false, // 模态框显隐状态
      addLogForm: {
        task_id: null, //关联的主项目ID
        log_title: null, // 日志的标题
        self_score: null,        // 自我评分（默认0星）
        focus_time: null,        // 专注时长（默认0分钟）
        description: null,       // 日志描述
        attachment: null,//附件路径
      },

    }
  },
  created() {
  },
  mounted() {
    this.call_project_data()
    this.call_all_goal()
  },
  beforeDestroy() {
  },
  methods: {
    // 格式化数据（保持优化后逻辑）
    formatData(value) {
      if (value === null || value === undefined || isNaN(Number(value))) {
        return value;
      }
      const num = Number(value);

      if (num > 0 && num < 1) {
        return `${(num * 100).toFixed(2)}%`;
      }
      if (num >= 10000) {
        return `${(num / 10000).toFixed(2)}万`;
      }
      if (num >= 1) {
        return num.toFixed(2);
      }
      return value;
    },

    // 1. 统一数据刷新方法：唯一同步入口
    async refreshAllData() {
      try {
        // 第一步：并行请求核心数据（待办、目标、项目）
        await Promise.all([
          this.call_project_data(),
          this.call_all_goal(),
          // this.call_all_projects() // 如需启用项目请求，取消注释即可
        ]);

        // 第二步：同步 currentTask 和日志（仅当抽屉打开时）
        if (this.drawerVisible && this.currentProject?.id) {
          await this.syncCurrentTaskInfo(); // 同步项目基础信息（不再调用 refreshAllData）
          await this.refreshCurrentTaskLog(); // 同步日志
        }
      } catch (error) {
        console.error('刷新数据失败：', error);
        this.$message.warning('部分数据刷新失败，可尝试刷新页面');
      }
    },
    // 单独刷新当前项目的日志（确保日志同步）
    async refreshCurrentTaskLog() {
      try {
        this.currentProject.log_info = await this.getTodoByTaskId(this.currentProject.id);
      } catch (error) {
        console.error('刷新当前项目日志失败：', error);
        this.$message.warning('日志数据刷新失败');
      }
    },
    // 某日项目数据（保持优化后逻辑）
    async call_project_data() {
      try {
        const response = await this.$axios.get('/work/project/get_all');
        this.all_projects = response.data.data.map(item => ({
          ...item,
          program_status: Number(item.is_done),
        }));
        console.log(this.all_projects)
        this.TotalCount = this.all_projects.length;
        this.pg_change();
      } catch (error) {
        console.error('获取每日待办失败：', error);
        throw error;
      }
    },
    // 处理每页条数变化（保持逻辑）
    size_change(val) {
      this.PageSize = val;
      this.CurrentPage = 1;
      this.pg_change();
    },

    // 处理页码变化（保持逻辑）
    current_change(val) {
      this.CurrentPage = val;
      this.pg_change();
    },

    // 处理分页逻辑（保持优化后逻辑）
    pg_change() {
      const startIndex = (this.CurrentPage - 1) * this.PageSize;
      const endIndex = startIndex + this.PageSize;
      this.project_list = this.all_projects?.slice(startIndex, endIndex) || [];
    },

    // 获取所有的目标（保持优化后逻辑）
    async call_all_goal() {
      try {
        const response = await this.$axios.post('/goal/get_goals_details', {});
        this.all_goal = response.data.data.items.map(item => ({
          ...item,
          goal_status: Number(item.goal_status),
        }));
        this.ExpTotalCount = this.all_goal.length;
      } catch (error) {
        console.error('获取所有目标失败：', error);
        throw error;
      }
    },


    // 3. 删除项目方法（修复：删除成功后触发全量刷新，而非仅调用 call_project_data
    async delete_project(id) {
      try {
        const res = await this.$axios.post('/work/project/delete', { project_id: id });
        if (res.data.code === 200) {
          this.$message.success('删除成功');
          // 关闭当前项目抽屉（如果是当前打开的项目）
          if (this.currentProject?.id === id) {
            this.drawerVisible = false;
            this.currentProject = {};
          }
          await this.refreshAllData(); // 关键：触发全量刷新，同步所有数据
        } else if (res.data.code === 400) {
          this.$notify.error('此项目有关联日志，请先删除日志后再删除项目');
        } else {
          this.$message.error(`删除失败：${res.data.message || '未知错误'}`);
        }
      } catch (error) {
        console.error('删除待办失败：', error);
        this.$message.error(`删除项目失败，请稍后重试：${error.message || '网络异常'}`);
      }
    },


    // 新增目标（保持逻辑，成功后触发全量刷新）
    async add_project() {
      try {
        const response = await this.$axios.post('/work/project/create', this.add_project_form);

        if (response.data.code === 200) {
          this.$message.success('创建项目成功，请编辑项目相关信息~');
          this.currentProject = {
            ...this.add_project_form,
            id: response.data.data,
            log_info: [] // 初始化日志为空
          };
          console.log(this.currentProject.id)
          this.drawerVisible = true;
          await this.refreshAllData(); // 刷新后会自动加载当前项目日志
        } else {
          this.$message.error(`创建失败：${response.data.message}`);
        }
      } catch (error) {
        console.error('新增项目失败：', error);
        this.$message.error(`内部错误：${error.message || '网络异常'}`);
      }
    },

    // 打开抽屉栏（关键优化：等待日志加载完成后再打开抽屉）
    async handleView(row) {
      try {
        // 1. 显示加载状态（提升用户体验）
        this.$message.info('加载项目详情中...');

        // 2. 深拷贝项目数据（避免污染原数据）
        this.currentProject = { ...row };

        // 3. 先加载日志（等待接口响应完成）
        const logList = await this.getTodoByTaskId(row.id);

        // 4. 确保 log_info 是响应式的（关键：解决Vue 2属性新增检测问题）
        this.$set(this.currentProject, 'log_info', logList); // 用 $set 触发响应式更新

        // 5. 日志加载完成后，再打开抽屉（同步渲染）
        this.drawerVisible = true;

        // 关闭加载提示
        this.$message.closeAll();
      } catch (error) {
        this.$message.error('加载项目详情失败');
        console.error('打开抽屉失败：', error);
      }
    },

    // 对主项目追加日志（保持逻辑）
    openLogModal(main_task_id) {
      this.addLogForm.task_id = main_task_id;
      this.logModalVisible = true;
    },

    // 2. 同步 currentTask 基础信息（关键修复：移除 refreshAllData 调用）
    async syncCurrentTaskInfo() {
      try {
        // 直接从已刷新的 all_项目 中获取最新数据（all_项目 已在 refreshAllData 中更新）
        const latestTask = this.all_projects?.find(item => item.id === this.currentProject.id);

        if (latestTask) {
          // 深拷贝最新数据，保留日志（避免响应式丢失）
          this.currentProject = {
            ...latestTask,
            is_done: Number(latestTask.is_done),
            importance: Number(latestTask.importance),
            log_info: this.currentProject.log_info || [] // 保留已加载的日志
          };
          // 确保 Vue 2 响应式更新
          this.$set(this, 'currentTask', this.currentProject);
        } else {
          // 项目不存在时关闭抽屉
          this.$message.warning('当前项目已不存在或状态变更');
          this.drawerVisible = false;
          this.currentProject = {};
        }
      } catch (error) {
        console.error('同步当前项目信息失败：', error);
        this.$message.warning('项目信息刷新失败');
      }
    },

    // 提交日志（强化 currentTask 同步）
    async add_log() {
      try {
        const res = await this.$axios.post('/api/项目/log/add', this.addLogForm);
        if (res.data.code === 200) {
          this.$message.success('添加成功');
          this.logModalVisible = false;
          this.addLogForm = {};

          // 优先刷新日志 + 同步 currentTask 基础信息（双重保障）
          if (this.drawerVisible && this.currentProject?.id) {
            await this.refreshCurrentTaskLog();
            await this.syncCurrentTaskInfo(); // 新增：同步项目基础信息
          }

          await this.refreshAllData();
          this.clear_file_list = true
        } else {
          this.$message.error(`添加日志失败：${res.data.message}`);
        }
      } catch (error) {
        console.error('添加日志失败：', error);
        this.$message.error('添加日志失败，请稍后重试');
      }
    },

    // 根据主项目id获取日志信息（保持优化后逻辑）
    async getTodoByTaskId(taskId) {
      if (!taskId || !Number.isInteger(taskId) || taskId <= 0) {
        this.$message.warning('项目ID不合法');
        return [];
      }

      try {
        const res = await this.$axios.post('/api/todo/get_todo_by_project_id', {
          project_id: taskId,
        });
        if (res.data.code === 200) {
          return res.data.data.items || [];
        } else {
          this.$message.warning(`查询日志提醒：${res.data.msg || res.data.message}`);
          return [];
        }
      } catch (error) {
        console.error('查询日志异常：', error);
        this.$message.error(`${error.message || '网络异常'}`);
        return [];
      }
    },

    // 提交项目记录更改请求（强化 currentTask 同步）
    async submit_project_change() {
      try {
        const res = await this.$axios.post('/work/project/update', this.currentProject);
        console.log(this.currentProject)
        if (res.data.code === 200) {
          this.$message.success(res.data.message || '更新成功');
          // 立即同步 currentTask 基础信息（避免抽屉内显示旧数据）
          await this.syncCurrentTaskInfo();
          await this.refreshAllData();
        } else {
          this.$message.error(`更新失败：${res.data.message}`);
        }
      } catch (error) {
        console.error('更新待办异常：', error);
        this.$message.error(`更新失败：${error.message || '网络异常'}`);
      }
    },


    // 上传好附件之后的回调事件
    get_uploaded_url(file_url) {
      this.addLogForm.attachment = file_url
      console.log('回调连接', this.addLogForm)
    },
  },
  watch: {
    项目_date: {
      deep: true,
      immediate: true,
      handler() {
        this.call_project_data()
      }
    },
  }


}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.header-row {
  margin-bottom: 20px;
}

.header-content {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.update-time {
  color: #666;
  font-size: 14px;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  height: 100%;
}

.kpi-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.kpi-card .el-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.kpi-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  color: #e74c3c;

}

.kpi-trend.down {
  color: #42b983;

}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.chart-container {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .kpi-card {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .chart-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .kpi-card {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .chart-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-info {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .kpi-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.is-selected {
  color: #1989FA;
}
</style>

<style scoped>
.table-pagination-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>

<style scoped>
/* 抽屉容器整体样式 */
.drawer-container {
  padding: 20px;
  background-color: #fafafa;
  min-height: calc(100vh - 120px);
}

/* 卡片通用样式 */
.el-card {
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.card-header i {
  color: #409eff;
  margin-right: 8px;
  font-size: 18px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.card-content {
  color: #666;
}

/* 信息行样式 */
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  width: 120px;
  color: #999;
  font-size: 14px;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

/* 描述类样式 */
.desc-content {
  line-height: 1.8;
}

.desc-item .label {
  display: block;
  margin-bottom: 8px;
  color: #999;
}

.desc-text {
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
  min-height: 80px;
  white-space: pre-wrap;
  /* 保留换行符 */
}

.attachment-list {
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 评分文本样式 */
.score-text {
  color: #666;
  font-size: 14px;
}

/* 间距样式 */
.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}

.ml-2 {
  margin-left: 8px;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  .drawer-container {
    padding: 10px;
  }

  .label {
    width: 100px;
  }
}
</style>
<style scoped>
/* 日志时间线容器：固定高度 + 垂直滚动 */
.timeline-container {
  height: 350px;
  /* 可根据需求调整高度（如 200px/300px） */
  overflow-y: auto;
  /* 垂直方向溢出时显示滚动条 */
  overflow-x: hidden;
  /* 禁止水平滚动 */
  padding-right: 8px;
  /* 给滚动条预留空间，避免内容被遮挡 */
}


.timeline-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #333;
}

.timeline-card p {
  font-size: 12px;
  color: #999;
  margin: 0;
  line-height: 1.5;
}

/* 美化滚动条（可选，适配 Chrome/Safari） */
.timeline-container::-webkit-scrollbar {
  width: 6px;
  /* 滚动条宽度 */
}

.timeline-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  /* 滚动条轨道背景 */
  border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb {
  background: #ddd;
  /* 滚动条滑块颜色 */
  border-radius: 3px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
  background: #ccc;
  /* 滚动条滑块 hover 颜色 */
}
</style>

<!-- 组件内样式（仅修改 .timeline-card 及其子元素） -->
<style scoped>
/* 卡片主样式 */
.timeline-card {
  width: 100%;
  max-width: 850px;
  margin: 8px 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  /* hover 过渡 */
  overflow: hidden;
  padding: 20px 18px;
  /* 内边距，避免内容贴边 */
}

/* 卡片 hover 交互效果 */
.timeline-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: #e0e7ff;
  /* 主题色边框 */
  transform: translateY(-2px);
  /* 轻微上浮 */
}

/* 标题样式（h4） */
.timeline-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 超长标题省略 */
  display: flex;
  align-items: center;
}

/* 标题前加小图标（可选，增强视觉） */
.timeline-card h4::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #409EFF;
  /* 主题色 */
  margin-right: 8px;
  border-radius: 2px;
}

/* 描述样式（p 标签，第二行） */
.timeline-card p:nth-child(2) {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 16px 0;
  /* 关键：识别\n换行，同时折叠多余空白 */
  white-space: pre-line;
  /* 最多3行省略（包含手动换行的行） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：明确添加省略号兼容 */
}

/* 提交时间样式（p 标签，第三行） */
.timeline-card p:nth-child(3) {
  font-size: 13px;
  color: #9ca3af;
  /* 浅灰色，次要信息 */
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 时间前加小图标（可选） */
.timeline-card p:nth-child(3)::before {
  content: "⌛";
  /* 简单时间图标，无需额外导入 */
  font-size: 14px;
}

/* 响应式适配：小屏幕调整内边距和字体 */
@media (max-width: 768px) {
  .timeline-card {
    padding: 16px 12px;
    max-width: 100%;
  }

  .timeline-card h4 {
    font-size: 15px;
  }

  .timeline-card p:nth-child(2) {
    font-size: 13px;
    -webkit-line-clamp: 2;
    /* 小屏幕减少显示行数 */
  }
}
</style>
